<script setup>
import { useUserStore } from '@/stores/user'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const userStore = useUserStore()
const router = useRouter()

const logout = () => {
  ElMessageBox.confirm('确认退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logout()
    router.push('/login')
  })
}
const isCollapse = ref(false)
</script>

<template>
  <div class="aside">
    <el-menu active-text-color="#ffd04b" background-color="#442056" class="el-menu-vertical-demo" :collapse="isCollapse"
      default-active="/admin" router text-color="#fff">
      <el-menu-item index="/admin">
        <el-icon>
          <Operation />
        </el-icon>
        <span>人员管理</span>
      </el-menu-item>
      <el-menu-item @click="isCollapse = !isCollapse">
        <el-icon>
          <Grid />
        </el-icon>
        <span>折叠菜单</span>
      </el-menu-item>
      <el-sub-menu index="/update">
        <template #title>
          <el-icon>
            <User />
          </el-icon>
          <span>基本资料</span>
        </template>
        <el-menu-item index="/update">
          <el-icon>
            <Edit />
          </el-icon>
          <span>修改资料</span>
        </el-menu-item>
        <el-menu-item index="/reset">
          <el-icon>
            <EditPen />
          </el-icon>
          <span>修改密码</span>
        </el-menu-item>
        <el-menu-item @click="logout">
          <el-icon>
            <Warning />
          </el-icon>
          <span>退出登录</span>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="/docu">
        <template #title>
          <el-icon>
            <DocumentCopy />
          </el-icon>
          <span>文档查询</span>
        </template>
        <el-menu-item index="/vue">
          <svg t="1718276703086" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4452" width="20" height="20"><path d="M512 504L764.8 68.8h-134.4L512 275.2 393.6 70.4h-134.4L512 504zM819.2 70.4L512 600 204.8 68.8H0l512 886.4L1024 70.4H819.2z" fill="#888888" p-id="4453"></path></svg>
          <span>vue文档</span>
        </el-menu-item>
        <el-menu-item index="/element">
          <el-icon>
            <ElementPlus/>
          </el-icon>
          <span>element文档</span>
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/about">
        <el-icon>
          <QuestionFilled />
        </el-icon>
        <span>关于我们</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped>
.aside>ul {
  height: calc(100vh - 60px);
}
</style>
